<template>
	<div>
		<div class="video" v-show="mAll">
			<div class="title">视频专区</div>

			<van-tabs v-model="active">
				<van-tab title="全部">
					<div class="mvAll">
						<ul>
							<router-link v-for="item in mAll" :key="item.id" tag="li"
								:to="'/mvplay/mvplay?id=' + item.id">
								<div class="img">
									<img :src="item.MImage" alt="" />
								</div>
								<div class="mes">
									<p>{{ item.MusicName }} - {{ item.SName }}</p>
								</div>
							</router-link>
						</ul>
					</div>
				</van-tab>

				<van-tab title="推荐">
					<div class="mvCom">
						<ul>
							<router-link v-for="item in mCom" :key="item.id" tag="li"
								:to="'/mvplay/mvplay?id=' + item.id">
								<div class="img">
									<img :src="item.MImage" alt="" />
								</div>
								<div class="mes">
									<p>{{ item.MusicName }} - {{ item.SName }}</p>
								</div>
							</router-link>
						</ul>
					</div>
				</van-tab>

				<van-tab title="最新">
					<div class="mvNew">
						<ul>
							<router-link v-for="item in mNew" :key="item.id" tag="li"
								:to="'/mvplay/mvplay?id=' + item.id">
								<div class="img">
									<img :src="item.MImage" alt="" />
								</div>
								<div class="mes">
									<p>{{ item.MusicName }} - {{ item.SName }}</p>
								</div>
							</router-link>
						</ul>
					</div>
				</van-tab>

				<van-tab title="排行">
					<div class="mvNum">
						<ul>
							<router-link v-for="item in mNum" :key="item.id" tag="li"
								:to="'/mvplay/mvplay?id=' + item.id">
							<div class="img">
								<img :src="item.MImage" alt="" />
							</div>
							<div class="mes">
								<p>{{ item.MusicName }} - {{ item.SName }}</p>
							</div>
							</router-link>
						</ul>
					</div>
				</van-tab>

				<van-tab title="独家">
					<div class="mvSelf">
						<ul>
							<router-link v-for="item in mSelf" :key="item.id" tag="li"
								:to="'/mvplay/mvplay?id=' + item.id">
								<div class="img">
									<img :src="item.MImage" alt="" />
								</div>
								<div class="mes">
									<p>{{ item.MusicName }} - {{ item.SName }}</p>
								</div>
							</router-link>
						</ul>
					</div>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
	import {
		getMvAll,
		getMVCommend,
		getMVFirst,
		getMVTop,
		getMVExclusive,
	} from "../api/video";
	export default {
		data() {
			return {
				active: 0,
				mAll: null,
				mCom: null,
				mNew: null,
				mNum: null,
				mSelf: null,
			};
		},
		methods: {
			async getMvAllFun() {
				await getMvAll().then((data) => {
					// console.log(data);
					this.mAll = data.data; 
					getMVCommend().then((data) => {
					// console.log(data);
					this.mCom = data.data;
					getMVFirst().then((data) => {
					//  console.log(data);
					this.mNew = data.data;
					getMVTop().then((data) => {
					//  console.log(data);
					this.mNum = data.data;
					getMVExclusive().then((data) => {
					//  console.log(data);
					this.mSelf = data.data;
				});
				});
				});
				});
				});
			},
			
		},
		created() {
			this.getMvAllFun();
			this.$emit("getnavs-btn", true);
		},
	};
</script>

<style lang="less">
	.video {
		padding-bottom: 50px;
		// background-color: #0F172A;
		// color: #EEEEEE;
		.van-tabs {
			color: #EEEEEE !important;
			background-color: #0F172A !important;
		}
		.van-tab {
			color: #EEEEEE !important;
			background-color: #0F172A !important;
		}
		.van-tabs__line{
			background-color: #243DE2;
		}
		.title {
			width: 100%;
			min-height: 30px;
			line-height: 30px;
			font-size: 20px;
			background-color: #0F172A;
			color: #EEEEEE;
			text-align: center;
			padding: 8px 0;
		}

		.mvAll,
		.mvCom,
		.mvNew,
		.mvNum,
		.mvSelf {
			margin-top: 8px;
			background-color: #0F172A;
			color: #EEEEEE;

			ul {
				li {
					padding: 0 8px;
					margin-bottom: 10px;

					.img {
						width: 100%;
						height: auto;
						border-radius: 20px;
						img {
							width: 100%;
							height: auto;
							border-radius: 20px;
						}
					}

					.mes {
						padding: 4px 8px;

						p {
							font-size: 16px;
							// 2、让文本不会自动换行 ：
							white-space: nowrap;
							// 3、让文本溢出隐藏：
							overflow: hidden;
							// 4、文本溢出时显示省略号：
							// text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
</style>
